<template>
	<div class="datascreen-box" :style="{ maxHeight: boxHeight + 'px' }">
		<div class="left-container">
			<leftTree :data="departmentData" @checkedKeys="getCheckedKeys"></leftTree>
		</div>
		<div class="right-container">
			<rightTable :selectIds="selectIds"></rightTable>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import leftTree from "./components/leftTree.vue";
import rightTable from "./components/rightTable.vue";
// import systemApi from "../systemSetting.js";
import systemApi from "@/views/systemSetting/systemSetting"


// ---获取组织结构数据---
let departmentData = ref([]);
let getData = async () => {
	let res = await systemApi.auth.getDepartmentTree();
	departmentData.value = res;
};
getData();

// 传递选中部门id
let selectIds = ref([]);
let getCheckedKeys = (data) => {
	// console.log(data, "--------index-----");
	selectIds.value = data;
};

// ---设置元素最大高度---
let boxHeight = ref(0);
let getDifferHeight = (
	dom,
	propsArr = ["paddingTop", "paddingBottom", "marginTop", "marginBottom"]
) => {
	let domStyle = window.getComputedStyle(dom);
	let differHeight = 0;
	for (let i = 0; i < propsArr.length; i++) {
		let key = propsArr[i];
		let str = domStyle[key];
		let num = Number(str.split("px")[0]);
		differHeight += num;
	}
	return differHeight;
};
onMounted(() => {
	let dom = document.getElementsByClassName("main main-padding")[0];
	let height1 = dom.clientHeight - getDifferHeight(dom);
	let headDom = document.getElementsByClassName("breadCrumbMenuPage")[0];
	let height2 = headDom.clientHeight + getDifferHeight(headDom);
	boxHeight.value = height1 - height2;
});
</script>
<style lang="scss" scoped>
.datascreen-box {
	display: flex;
	.left-container {
		flex: 2;
	}
	.right-container {
		flex: 5;
	}
}
</style>
